<script setup>
// deep 在vue3中不生效
defineOptions({
  options: { styleIsolation: 'shared' },
})

defineProps({
  // 当前值
  value: {
    type: [String, Number],
    default: 0,
  },
  // 最大值
  max: {
    type: Number,
    default: 0,
  },
  // 滑块的大小，取值范围为 12 - 28
  blockSize: {
    type: Number,
    default: 15,
  },
  // 主题颜色
  theme: {
    type: String,
    default: '#2a3ed5',
  },
})

// 事件
const emit = defineEmits(['change', 'changing'])

// 完成一次拖动后触发的事件，event.detail = {value: value}
const changeSlider = (e) => {
  emit('change', e.detail.value)
}

// 拖动过程中触发的事件，event.detail = {value: value}
const changingSlider = (e) => {
  emit('changing', e.detail.value)
}
</script>

<template>
  <view class="slider">
    <slider
      backgroundColor="#FFFFFF"
      :activeColor="theme"
      block-color="#465cff"
      :block-size="blockSize"
      :value="value"
      :max="max"
      @change="changeSlider"
      @changing="changingSlider"
    />
  </view>
</template>

<style lang="scss" scoped>
.slider {
  width: 100%;
}

uni-slider {
  margin: 10rpx;
  :deep(.uni-slider-handle-wrapper) {
    height: 4px;
  }
}

wx-slider {
  margin: 0;
}
</style>
